<template>
  <menus-button
    ico="reply"
    :text="t('comment.text')"
    @menu-click="showCommentDialog = true"
  />

  <!-- 优化的批注对话框 -->
  <t-dialog
    v-model:visible="showCommentDialog"
    :header="null"
    :width="400"
    :destroy-on-close="true"
    placement="center"
    :show-overlay="true"
    :attach="container"
    class="umo-comment-bubble-dialog"
  >
    <div class="comment-dialog-content">
      <div class="comment-header">
        <div class="user-avatar">
          <div class="avatar-circle">
            <icon name="assistant" size="16" />
          </div>
        </div>
        <div class="comment-input">
          <t-textarea
            v-model="commentContent"
            :placeholder="t('comment.bubbleDialog.placeholder')"
            :autosize="{ minRows: 3, maxRows: 6 }"
            :bordered="false"
            class="comment-textarea"
          />
        </div>
      </div>

      <div class="comment-actions">
        <t-button
          variant="text"
          size="small"
          @click="showCommentDialog = false"
        >
          {{ t('comment.bubbleDialog.cancel') }}
        </t-button>
        <t-button
          theme="primary"
          size="small"
          @click="submitComment"
          :disabled="!commentContent.trim()"
        >
          {{ t('comment.bubbleDialog.send') }}
        </t-button>
      </div>
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
const editor = inject('editor')
const container = inject('container')

let showCommentDialog = $ref(false)
let commentContent = $ref('')

// 提交批注
const submitComment = () => {
  if (!commentContent.trim()) return

  // 获取当前选中的文本
  const selectedText = editor.value?.state.doc.textBetween(
    editor.value?.state.selection.from,
    editor.value?.state.selection.to,
    ' '
  )

  // 插入批注
  editor.value?.commands.insertComment({
    author: '当前用户', // 这里可以从用户配置中获取
    content: commentContent.trim(),
  })

  // 重置对话框
  commentContent = ''
  showCommentDialog = false

  editor.value?.commands.focus()

  useMessage('success', {
    content: t('comment.bubbleDialog.success'),
    placement: 'top',
  })
}

// 监听对话框关闭
watch(
  () => showCommentDialog,
  (visible) => {
    if (!visible) {
      commentContent = ''
    }
  }
)
</script>

<style lang="less" scoped>
:deep(.umo-comment-bubble-dialog) {
  .t-dialog__header {
    display: none;
  }

  .t-dialog__body {
    padding: 16px;
  }
}

.comment-dialog-content {
  .comment-header {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;

    .user-avatar {
      flex-shrink: 0;
      margin-top: 4px;

      .avatar-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #52c41a;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
    }

    .comment-input {
      flex: 1;

      .comment-textarea {
        :deep(.t-textarea__inner) {
          border: 1px solid var(--td-border-level-1-color);
          border-radius: 8px;
          padding: 12px;
          font-size: 14px;
          transition: border-color 0.2s ease;

          &:focus {
            border-color: var(--td-brand-color);
            box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
          }

          &::placeholder {
            color: var(--td-text-color-placeholder);
          }
        }
      }
    }
  }

  .comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style> 